<template>
  <common-edit-dialog
    :title="dialogTitle"
    :visible.sync="dialogShow"
    @cancel="dialogShow = false"
    @submit="submitForm"
    width="60%"
    :button-loading="isPersistenceLoading"
  >
    <el-form
      class="login-edit-form"
      ref="form"
      :model="form"
      :rules="rules"
      label-width="100px"
      @submit.native.prevent
    >
      <el-row :gutter="18">
        <el-col :span="24">
          <el-form-item label="策略名称" prop="ruleName">
            <common-input
              v-model="form.ruleName"
              placeholder="请输入策略名称"
              :maxlength="16"
            />
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-col :span="12" style="padding: 0">
            <el-form-item label="图形验证码" prop="pictureVercodeFlag">
              <el-radio-group v-model="form.pictureVercodeFlag">
                <el-radio :label="0">一直启用</el-radio>
                <el-radio :label="1">一直不启用</el-radio>
                <el-radio :label="2">自定义</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col
            :span="12"
            v-if="form.pictureVercodeFlag === 2"
            style="padding: 0"
          >
            <el-form-item label="">
              <el-row :gutter="0">
                <el-col :span="24">
                  <common-input-number
                    :max-length="2"
                    v-model="form.pictureVercodeFailCount"
                    placeholder="请输入"
                  />
                  <span style="padding-left: 8px">次登录失败后启用</span>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-col>

        <el-col :span="12">
          <el-form-item label="账号冻结次数" prop="loginFailCountFreeze">
            <el-row :gutter="0">
              <el-col :span="24">
                <common-input-number
                  :max-length="3"
                  v-model="form.loginFailCountFreeze"
                  placeholder="请输入"
                />
                <span style="padding-left: 8px">次登录失败后冻结账号</span>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="账号解冻时间" prop="accountFreezeLong">
            <el-row :gutter="0">
              <el-col :span="24">
                <common-input-number
                  :max-length="5"
                  v-model="form.accountFreezeLong"
                  placeholder="请输入"
                />
                <span style="padding-left: 8px">分钟后解冻账号</span>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="访问来源策略" prop="userLoginIpFlag">
            <el-switch v-model="form.userLoginIpFlag"></el-switch>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item label="认证有效时长" prop="loginStepTimeLong">
            <el-row :gutter="0">
              <el-col :span="24">
                <common-input-number
                  :max-length="5"
                  v-model="form.loginStepTimeLong"
                  placeholder="请输入"
                />
                <span style="padding-left: 8px">分钟</span>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会话有效时长" prop="tokenTimeLong">
            <el-row :gutter="0">
              <el-col :span="24">
                <common-input-number
                  :max-length="5"
                  v-model="form.tokenTimeLong"
                  placeholder="请输入"
                />
                <span style="padding-left: 8px">分钟</span>
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </common-edit-dialog>
</template>

<script>
import { loginrule_updateSystemLoginRule } from "@/api/management/configure/index.js";

export default {
  components: {},
  props: {},
  data() {
    return {
      isPersistenceLoading: false,
      dialogTitle: "编辑登录策略", // 标题
      dialogShow: false, // 是否显示
      form: {
        userLoginRuleId: null,
        ruleName: "",
        pictureVercodeFlag: 1,
        pictureVercodeFailCount: 1,
        loginFailCountFreeze: 1,
        accountFreezeLong: 1,
        userLoginIpFlag: false,
        loginStepTimeLong: 1,
        tokenTimeLong: 30,
      },
      rules: {
        ruleName: [
          {
            required: true,
            message: "请输入策略名称",
            trigger: "blur",
          },
        ],
        pictureVercodeFailCount: [
          {
            min: 1,
            max: 99,
            type: "number",
            message: "账号登录失败次数范围1-99",
            trigger: "blur",
          },
        ],
        loginFailCountFreeze: [
          {
            required: true,
            message: "请输入账号冻结次数",
            trigger: "blur",
          },
          {
            min: 1,
            max: 999,
            type: "number",
            message: "账号冻结次数范围1-999",
            trigger: "blur",
          },
        ],
        accountFreezeLong: [
          {
            required: true,
            message: "请输入账号冻结时间",
            trigger: "blur",
          },
          {
            min: 1,
            max: 99999,
            type: "number",
            message: "账号冻结时间范围1-99999",
            trigger: "blur",
          },
        ],
        userLoginIpFlag: [
          {
            required: true,
            message: "请选择",
          },
        ],
        loginStepTimeLong: [
          {
            required: true,
            message: "请输入认证有效时长",
            trigger: "blur",
          },
          {
            min: 1,
            max: 99999,
            type: "number",
            message: "认证有效时长范围1-99999",
            trigger: "blur",
          },
        ],
        tokenTimeLong: [
          {
            required: true,
            message: "请输入会话有效时长",
            trigger: "blur",
          },
          {
            min: 30,
            max: 99999,
            type: "number",
            message: "会话有效时长范围30-99999",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    /**
     * 关闭
     */
    close() {
      // this.$refs.form.resetFields()
      this.dialogShow = false;
      this.$emit("refresh");
    },
    /**
     * 显示
     */
    show(data) {
      Reflect.ownKeys(this.form).forEach((k) => (this.form[k] = data[k]));
      this.form.userLoginIpFlag = data.userLoginIpFlag === 0;
      this.dialogShow = true;
    },
    /**
     * 提交
     */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (!this.isPersistenceLoading) {
            this.isPersistenceLoading = true;
            loginrule_updateSystemLoginRule({
              ...this.form,
              userLoginIpFlag: this.form.userLoginIpFlag ? 0 : 1,
            })
              .then((res) => {
                if (res && res.code === 200) {
                  this.$GlobalSuccessMessage("编辑成功");
                  this.close();
                } else {
                  this.$GlobalErrorConfirm("编辑失败", res.msg);
                }
              })
              .finally(() => {
                this.isPersistenceLoading = false;
              });
          }
        }
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.el-col-12 {
  .el-radio {
    margin-right: 11px;
  }
}
</style>
